<template>
<!-- 轮播图 -->
  <div class="swiper-demo">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in img" :key="item.id" class="swiper-slide">
          <img :src="item" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
// 轮播
import { BannerApi } from "@/request/api";
export default {
  data() {
    return {
      img: [],
    };
  },
  updated() {
    new Swiper(".swiper-container", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
      speed: 2000,
      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    });
  },
  created() {
    BannerApi().then((res) => {
      console.log(res);
      console.log(res.data.data[1]);
      res.data.data[1].forEach((ele) => {
        console.log(ele.slide_show_imgUrl);
        this.img.push(ele.slide_show_imgUrl);
      });
    });
  },
};
</script>
<style lang="less">
.swiper-container {
  width: 100vw;
  height: 32vw;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  img {
    width: 100vw;
    height: 35vw;
    display: block;
   
  }
}
</style>